<template>
 <div id="BBB">
  <p>能力订阅</p>
  <div id="topB" ref="topB" @click="goCapSub"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getindex} from "@/api/statistics/statistics";

export default {
  mounted() {
    var myChart = echarts.init(this.$refs.topB);
    let option
    getindex().then(res => {
       option = {
        title: {
          show: true,
          text: "Total:"+res.data.subTotal,
          subtext: "▲ "+res.data.subTrend+"",
          left: "20",
          top: "1",
          itemGap:10,
          textStyle: {
            fontSize: 30
          },
          subtextStyle: {
            color: 'rgb(255,228,59)',
            fontSize: 18,
            show: true,
            // shadowColor: 'rgba(1,16,255, 0.6)',
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          show: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon','Sun', 'Mon'],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        series: [
          {
            data: res.data.subList,
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                color: '#a80000', //改变折线点的颜色
                lineStyle: {
                  color: 'rgb(255,228,59)', //改变折线颜色,
                  width: 5,     //折线粗细
                  shadowColor: 'rgba(255,221,0,0.7)',
                  shadowBlur: 15 //折线粗细
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option)
    });


  },
  methods: {
    goCapSub() {
      this.$router.push('/capSub')
    }
  }

};
</script>

<style lang="scss" scoped>
#BBB{
  width: 32%;
  margin: 9px;
  height:260px;
  margin-top: 15px;
  border-radius: 13px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);


  p{
    font-size:18px;
    color: gray;
    height:20px;
    line-height: 20px;
    margin:0;
    padding:0;
    margin-left:20px;
    margin-top:15px;
    font-weight: 600;
    margin-bottom:5px;
  }
}
#topB {
  width: 100%;
  height: 220px;
  background:white;
  border-radius: 13px;
  padding:0;
  &:hover {
  background:linear-gradient(to top,  rgb(255, 252, 230), #ffffff) ;
}


}
</style>
